<template>
	<view class="cabinet-container">
		<image class="background-image" :src="bgImages.cabinet" mode="contain"></image>
		<movable-area class="cabinet-movable-area">
			<movable-view
				v-for="item in visibleItems"
				:key="item.id"
				class="thermometer"
				:inertia="false"
				:animation="false"
				:x="item.x"
				:y="item.y"
				@change="e => onDrag(e, item.id)"
				@touchend="e => onDragEnd(e, item.id)"
				direction="all"
				damping="80"
				out-of-bounds="false"
			>
				<image class="thermometer" :src="item.image" mode="aspectFit"></image>
			</movable-view>
		</movable-area>
		<view class="treatment-cart" :style="{ backgroundImage: `url(${uiImages.treatmentCartIcon})` }"></view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app'
import { items as resourceItems, bgImages, uiImages } from '@/src/dataResource.js';

// 批量物品数据
const items = ref(resourceItems.map((item, idx) => ({
	...item,
	x: 230 + idx * 80, // 根据索引动态计算x坐标，防止重叠
		y: 110,
	initialX: 230 + idx * 80,
		initialY: 110,
		visible: true
})));

// 计算属性：只渲染可见物品
const visibleItems = computed(() => items.value.filter(item => item && item.visible));

const cartArea = {
	x: 700, // 右下角医疗车区域的x
	y: 90, // 右下角医疗车区域的y
	width: 180,
	height: 280
};

onMounted(() => {
	items.value.forEach(item => {
		let pos = uni.getStorageSync(item.id + 'Position');
		if (!pos) {
			uni.setStorageSync(item.id + 'Position', 'cabinet');
			pos = 'cabinet';
		}
		item.visible = pos === 'cabinet';
		if (pos === 'cabinet') {
			item.x = item.initialX;
			item.y = item.initialY;
		}
		return pos === 'cabinet';
		
	});
	items.value.forEach(item => {
		console.log(`${item.name}(${item.id}) Position:`, uni.getStorageSync(item.id + 'Position'));
	});
});

onShow(() => {
	items.value.forEach(item => {
		let pos = uni.getStorageSync(item.id + 'Position');
		item.visible = pos === 'cabinet';
		if (pos === 'cabinet') {
			item.x = item.initialX;
			item.y = item.initialY;
		}
	});
});

const onDrag = (e, id) => {
	const item = items.value.find(i => i.id === id);
	if (item) {
		item.x = e.detail.x;
		item.y = e.detail.y;
	}
};

const onDragEnd = (e, id) => {
	const item = items.value.find(i => i.id === id);
	if (!item) return;
	const x = item.x;
	const y = item.y;
	// 判断是否进入医疗车区域
	if (
		x + item.width > cartArea.x &&
		x < cartArea.x + cartArea.width &&
		y + item.height > cartArea.y &&
		y < cartArea.y + cartArea.height
	) {
		// 进入医疗车，吸附到医疗车中心
		uni.setStorageSync(item.id + 'Position', 'cart');
		item.visible = false;
		uni.showToast({
			title: '已放入医疗车',
			icon: 'success',
			duration: 1500
		});
		console.log(item.id + ' moved to cart');
	} else {
		// 回到初始位置
		item.x = item.initialX;
		item.y = item.initialY;
	}
};
</script>

<style lang="scss" scoped>
.cabinet-container{
	position: fixed;
	width: 100%;
	height: 310rpx;
	background-color: #aab0b7;
	z-index: 1;
	.background-image {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60%;
		height: 100%;
		transform: translate(-50%, -50%);
		z-index: 1;
		object-fit: contain;
		// filter: blur(2px);
	}
	.cabinet-movable-area {
		position: relative;
		width: 100%;
		height: 310rpx;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.thermometer{
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		top: 0;
		right: 0;
		z-index: 10;
	}
	.treatment-cart{
		position: fixed;
		/* background-image: url('https://i.postimg.cc/W1LRwfRh/image-png-3.png'); */
		right: 20rpx;
		top: 90rpx;
		width: 180rpx;
		height: 280rpx;
		border-radius: 20rpx;
		padding: 0;
		z-index: 0;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}
</style>
